<template>
    <div class="left">
        <div class="left-top">
            <div class="title">乐月母婴，让婴儿更美好</div>
            <div class="sub-title">全国领先的家庭服务平台</div>
            <div class="type">
                <div class="nanny">保姆</div>/
                <div class="MaternityNurse">月嫂</div>/
                <div>育儿嫂</div>/
                <div>保洁</div>
            </div>
        </div>
        <div class="left-bottom">
            <div class="left-bottom-header">
                <el-button @click="list = user" bg>用户端</el-button>
                <el-button @click="list = aunt">阿姨端</el-button>
            </div>
            <div class="left-bottom-body">
                <div v-for="i in list">
                    <img class="left-bottom-body-left" :src="i.img" />
                    <div class="left-bottom-body-right">
                        <div class="left-bottom-body-right-top">
                            {{ i.title }}
                        </div>
                        <div class="left-bottom-body-right-bottom">
                            {{ i.content }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="image">

    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

interface s {
    title: string;
    content: string,
    img: string
}
const user = ref<s[]>([
    {
        title: "乐月母婴 APP",
        content: "一站式家庭服务平台，服务专业有保障 超值减免，红包，尽在乐月母婴手机端",
        img: 'https://wy-public-1306368414.cos.ap-nanjing.myqcloud.com/%E5%BE%AE%E4%BF%A1%E5%90%8D%E7%89%87wy.jpg'
    },
    {
        title: "乐月母婴 小程序",
        content: "即扫即使用，免安装，方便快捷",
        img: 'https://wy-public-1306368414.cos.ap-nanjing.myqcloud.com/%E5%BE%AE%E4%BF%A1%E5%90%8D%E7%89%87wy.jpg'
    }
])
const aunt = ref<s[]>([
    {
        title: "乐月母婴 APP",
        content: "一站式家庭服务平台，服务专业有保障 超值减免，红包，尽在乐月母婴手机端",
        img: 'https://wy-public-1306368414.cos.ap-nanjing.myqcloud.com/%E5%BE%AE%E4%BF%A1%E5%90%8D%E7%89%87wy.jpg'
    }
])

const list = ref<s[]>(user.value)


</script>

<style scoped lang="scss">
.left {
    position: absolute;
    left: 100px;
    width: 35%;
    height: 500px;
    // border: 1px red solid;
    margin-top: 100px;
    z-index: 99;

    .left-top {
        .title {
            font-weight: bold;
            font-size: 30px;
            text-align: left;
        }

        .sub-title {
            margin-top: 10px;
            letter-spacing: 10px;
            text-align: left;
        }

        .type {
            background-color: rgb(235, 173, 183);
            border-radius: 25px 0px 25px 0px;
            width: 220px;
            height: 40px;
            padding-left: 30px;
            display: flex;
            align-items: center;
            margin-top: 10px;
            // text-align: center;
            margin-left: 0;
            margin-right: auto;
        }
    }

    .left-bottom {
        margin-top: 50px;

        .left-bottom-header {
            display: flex;
            justify-content: left;
        }

        .left-bottom-body {
            margin-top: 30px;

            div {
                margin-top: 1px;
                display: flex;

                .left-bottom-body-left {
                    // width: 50px;
                    height: 80px;
                    margin-right: 20px;
                }

                .left-bottom-body-right {
                    display: block;

                    .left-bottom-body-right-top {
                        font-weight: bold;
                        font-size: 20px;
                        margin-bottom: 10px;
                    }
                }
            }


        }
    }
}

.image {
    display: block;
    height: 800px;
    width: 100%;
    animation: frams 5s infinite;
    background: url("https://wy-public-1306368414.cos.ap-nanjing.myqcloud.com/%E4%B9%90%E6%9C%88%E6%AF%8D%E5%A9%B43.jpg") no-repeat;
}

@keyframes frams {
    0% {
        background-image: url("https://wy-public-1306368414.cos.ap-nanjing.myqcloud.com/%E4%B9%90%E6%9C%88%E6%AF%8D%E5%A9%B43.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat
    }

    // 33% {
    //     background-image: url("https://wy-public-1306368414.cos.ap-nanjing.myqcloud.com/%E4%B9%90%E6%9C%88%E6%AF%8D%E5%A9%B42.jpg");
    //     background-size: 100% 100%;
    //     background-repeat: no-repeat
    // }

    // 66% {
    //     background-image: url("https://wy-public-1306368414.cos.ap-nanjing.myqcloud.com/%E4%B9%90%E6%9C%88%E6%AF%8D%E5%A9%B43.jpg");
    //     background-size: 100% 100%;
    //     background-repeat: no-repeat
    // }

    100% {
        background-image: url("https://wy-public-1306368414.cos.ap-nanjing.myqcloud.com/%E4%B9%90%E6%9C%88%E6%AF%8D%E5%A9%B42.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat
    }
}</style>
